import { Image, View, Text, ScrollView } from "@tarojs/components";
import Taro, { useLoad } from "@tarojs/taro";
import { useState } from "react";
import Tab from "../../component/tab";
import "./index.less";
import { imageList } from "../../config";

const tabList = ["订婚壁纸", "领证壁纸", "周年壁纸"];

export default function Index() {
  useLoad(() => {
    console.log("Page loaded.");
  });

  const [index, setIndex] = useState(0);

  function onTabClick(key) {
    setIndex(key);
  }

  const images = imageList[index];

  return (
    <View className='index'>
      <View className='logo'>
        <Text className='title'>樱花壁纸</Text>
        <Text className='text'>
          挑选一个模板开始制作吧。（都可以添加文字和照片哦）
        </Text>
      </View>
      <Tab tabList={tabList} onTabClick={onTabClick}></Tab>
      <ScrollView className='imageWrapper' scrollY>
        {images.map((item, i) => {
          return (
            <View
              key={i}
              className='imag-item'
              onClick={() => {
                Taro.navigateTo({
                  url: `/pages/editor/index?image=${item.src}`,
                });
              }}
            >
              <Image src={item.src}></Image>
              <View className='textWrapper'>
                <Text>{item.text}</Text>
                <Text className='text'>立即制作</Text>
              </View>
            </View>
          );
        })}
      </ScrollView>
    </View>
  );
}
